/**
 * @description  场外基金指令
 *   type: 引入模块的类型 1-指令新增，2-簿记新增，10-存续管理/交易录入 11-组合试算/场外基金 （ps：1指令 是顺延了之前的编号，这里不做修改）
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { message, Row, Col, Spin, Modal } from 'antd';
import { FirstHeaderC, AvailableAssetC, TradeHoldC } from '../../../comps';
import FundInfo from './common/FundInfo'; // 基金基础信息
import Redeem from './common/redeem'; // 赎回规则
import AddTradeC from './AddTradeC'; // 指令/簿记下达
import BuyRule from './common/buyRule'; // 买入规则
import Mystyle from './index.less';
@Form.create()
class AddFunTradeC extends PureComponent {
  static defaultProps = {
    onOk: () => {}, //新增成功通知父组件
    onCancel: () => {}, //取消通知父组件
  };
  constructor() {
    super();
    this.state = {
      secucode: undefined, // 证券/基金代码
      portfolio: undefined, // 组合
      position: undefined, // 持仓
      money: undefined, // 资金可用
      infos: undefined, // 基金基础信息
      fundType: '0', //基金类型
    };
  }

  componentDidMount() {}

  // 基金变更 请求基本信息
  secucodeOnChange = (e) => {
    this.setState({
      secucode: e,
    });
    if (e && e !== undefined) {
      const { dispatch } = this.props;
      const { fundType } = this.state;
      dispatch({
        type: 'newFundTrade/getFundInfo',
        payload: {
          secucode: e.secucode,
          type: fundType,
        },
        callback: (data) => {
          //报错的话 传递为{}  子组件展示无数据
          if (data) {
            //设置买入规则和卖出规则
            data.buyDate = 'T日';
            data.haveHoldDate = data.confirmDate ? `T+${Number(data.confirmDate.split('+')[1]) + 1}日` : undefined;
            data.redeemDate = 'T日';
            data.confirmDate = data.confirmDate ? data.confirmDate + '日' : undefined;
            data.confirmRedeemDate = data.confirmRedeemDate ? data.confirmRedeemDate + '日' : undefined;
            data.assetReceivedDate = data.assetReceivedDate ? data.assetReceivedDate + '日' : undefined;
          }
          this.setState({
            infos: data || {},
          });
        },
      });
    } else {
      //未选择基金 子组件展示请选择基金
      this.setState({
        infos: undefined,
      });
    }
  };

  // 组合变更事件 得到组合对象
  portfolioOnChange = (e) => {
    this.setState({
      portfolio: e,
    });
  };
  // 基金类型改变事件
  fundTypeOnchange = (e) => {
    this.setState({
      fundType: e,
    });
  };
  onOk = () => {
    this.props.onOk();
    this.setState({
      secucode: undefined, // 证券/基金代码
      portfolio: undefined, // 组合
      position: undefined, // 持仓
      money: undefined, // 资金可用
      infos: undefined, // 基金基础信息
      fundType: '0', //基金类型
    });
  };
  onCancel = () => {
    this.props.onCancel();
    this.setState({
      secucode: undefined, // 证券/基金代码
      portfolio: undefined, // 组合
      position: undefined, // 持仓
      money: undefined, // 资金可用
      infos: undefined, // 基金基础信息
      fundType: '0', //基金类型
    });
  };
  render() {
    const { portfolio, secucode, fundType, infos } = this.state;
    const { loading, type, info } = this.props;
    return (
      <div>
        <div style={{ overflow: 'hidden' }}>
          <Row className={Mystyle.index}>
            <Col span={12}>
              <FirstHeaderC title='基金基础信息' />
              <div style={{ marginBottom: '10px' }}>
                <Spin spinning={loading.effects['newFundTrade/getFundInfo'] == true}>
                  <FundInfo info={infos} fundType={fundType} />
                </Spin>
              </div>
              {/* 公募基金才有规则 */}
              {fundType == '0' ? (
                <>
                  <FirstHeaderC title='买入规则' />
                  <div style={{ marginBottom: '10px' }}>
                    <Spin spinning={loading.effects['newFundTrade/getFundInfo'] == true}>
                      <BuyRule info={infos} />
                    </Spin>
                  </div>
                  <FirstHeaderC title='赎回规则' />
                  <div>
                    <Spin spinning={loading.effects['newFundTrade/getFundInfo'] == true}>
                      <Redeem info={infos} />
                    </Spin>
                  </div>
                </>
              ) : null}
            </Col>
            <Col span={12}>
              <div style={{ marginBottom: '10px' }}>
                <AvailableAssetC
                  portfolio={portfolio}
                  onChange={(e) => {
                    // 资金值改变触发事件
                    this.setState({
                      money: e,
                    });
                  }}
                />
              </div>
              <div style={{ marginBottom: '10px' }}>
                <TradeHoldC
                  securityType={'2'} //场外基金
                  portfolio={portfolio}
                  tradingcode={secucode && secucode.tradingCode ? secucode.tradingCode : undefined}
                  exchangecode={secucode && secucode.exchangeCode ? secucode.exchangeCode : undefined}
                  onChange={(e) => {
                    this.setState(
                      {
                        position: { ...e },
                      },
                      () => {
                        // this.AddTrade?.AddFund?.changeinvestmentType()
                      },
                    );
                  }}
                />
              </div>
              <FirstHeaderC title={'交易要素'} />
              <div style={{ marginTop: '10px', height: '50px' }}>
                <AddTradeC
                  onRef={(ref) => (this.AddTrade = ref)}
                  type={type}
                  fundTypeOnchange={this.fundTypeOnchange}
                  portfolioOnChange={this.portfolioOnChange}
                  secucodeOnChange={this.secucodeOnChange}
                  money={this.state.money}
                  position={this.state.position}
                  onOk={this.onOk}
                  onCancel={this.onCancel}
                  info={info}
                />
              </div>
            </Col>
          </Row>
        </div>
      </div>
    );
  }
}

export default connect(({ userM, newFundTrade, interBankBasicInfoM, portfolioTrialAddM, loading, trailM, isAccountConfiguredM }) => ({
  userM,
  newFundTrade,
  interBankBasicInfoM,
  portfolioTrialAddM,
  loading,
  trailM,
  errorSetMsg: isAccountConfiguredM.msg,
  isAccountConfiguredM,
}))(AddFunTradeC);
